<template>
  <baidu-map
    class="bm-view map"
    :center="{ 
           lat: 34.424034,
          lng: 118.395956, }"
    :zoom="10"
    :scroll-wheel-zoom="true"
  >
    <!-- 标记点 -->
    <div v-for="(item, index) in positionData" :key="index">
      <bm-marker
        :position="{ lng: item.lng, lat: item.lat }"
        :dragging="true"
        @click="isShow(item)"
      >
        <bm-info-window
          :position="{ lng: item.lng , lat: item.lat }"
          :show="item.showFlag"
          @close="infoWindowClose"
          @open="infoWindowOpen"
        >
          <div>
            <div class="flexStart" style="width:290px;margin-bottom:20px;margin-top:5px;">
              <div class="left" style="position:relative;margin-right:12px">
                <img :src="item.img_content" alt width="120" height="88" />
                <div style="position:absolute;left:0;top:0">
                  <img :src="item.img_logo" alt width="44" height="42" />
                </div>
              </div>
              <div class="right flexDirectionCenter">
                <div style="width:154px">{{item.detail}}</div>
                <div class="newAdd" v-if="item.flag=='新建'">{{item.flag}}</div>
                <div class="newAdd2" v-if="item.flag=='局监管'">{{item.flag}}</div>
                <div class="newAdd3" v-if="item.flag=='局直管'">{{item.flag}}</div>
                <div class="addNum">接管项目数量：12个</div>
              </div>
            </div>
            <div style="width:100%">
              <a-button type="primary" style="width:100%" @click="toDetail(item)">点击查看</a-button>
            </div>
          </div>
        </bm-info-window>
      </bm-marker>
    </div>
    <!-- <bm-polyline :path="positionData" stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="2" :editing="true" @lineupdate="updatePolylinePath"></bm-polyline> -->
    <!-- <bml-curve-line :points="points" :editing="true" @lineupdate="update"></bml-curve-line> -->
  </baidu-map>
</template>
<script>
import { BmlCurveLine } from "vue-baidu-map";
// import img_content1 from "../../../assets/projectDetail.jpg";
import img_logo1 from "../../../../assets/homeImg/jujianguan.png";
import jiangyin from "../../../../assets/homeImg/jiangyin.jpg";
import img_logo2 from "../../../../assets/homeImg/zaijian.png";
import longtan from "../../../../assets/homeImg/longtan.jpg";
import img_logo3 from "../../../../assets/homeImg/juzhiguan.png";
import xinyi from "../../../../assets/homeImg/xinyi.jpg";
import nanbu from "../../../../assets/projectDetail.jpg";
import changtai from "../../../../assets/homeImg/changtai.jpg";
import chuzhou from "../../../../assets/homeImg/chuzhou.jpg";
import wufengshan from "../../../../assets/homeImg/wutaifeng.png";

export default {
  components: {
    BmlCurveLine
  },
  data() {
    return {
      positionData: [
        
        {
         lat: 34.424034,
          lng: 118.395956,
          showFlag: false,
          img_content: chuzhou,
          img_logo: img_logo3,
          flag: "新建",
          title: "京沪淮江段扩建工程",
          detail: "京沪高速公路淮安至江都段工程",
          price: "199.1亿元/152.7公里/3.5年"
        },
        {
          lat: 34.420341,
          lng: 118.40228,
          showFlag: false,
          img_content: nanbu,
          img_logo: img_logo3,
          flag: "新建",
          title: "南部通道",
          detail: "苏锡高速公路常州至无锡段工程",
          price: "159.1亿元/43.9公里/4年"
        },
        {
           lat: 34.415279,
          lng: 118.410904,
          showFlag: false,
          img_content:longtan,
          img_logo: img_logo3,
          flag: "新建",
          title: "龙潭长江大桥",
          detail: "龙潭过江通道工程",
          price: "62.54亿元/4.925公里/5年"
        },
        {
          lat: 34.411705,
          lng: 118.416438,
          showFlag: false,
         
          img_content: changtai,
          img_logo: img_logo3,
          flag: "新建",
          title: "常泰长江大桥",
          detail: "常泰过江通道",
          price: "158.61亿元/130.7公里/5.5年"
        },
        {
           lat: 34.294223,
          lng: 118.626282,
         showFlag: false,
         
          img_content: jiangyin,
          img_logo: img_logo3,
          flag: "新建",
          title: "江阴靖江长江隧道",
          detail: "江阴靖江长江隧道",
          price: "89.1亿元/5.6公里/3年"
        },
        {
           lat: 33.93653,
          lng: 118.944965,
          showFlag: false,
          img_content: wufengshan,
          img_logo: img_logo3,
          flag: "新建",
          title: "五峰山过江通道",
          detail: "五峰山过江通道公路接线工程",
          price: "93.58亿元/33.04公里/3年"
        },
        
      
      ],
      points: [
        // { lat: 34.424034, lng: 118.395956, showFlag: false },
        { lat: 34.424035, lng: 118.395957, showFlag: false },
        { lat: 34.424036, lng: 118.395958, showFlag: false },
        { lat: 34.420341, lng: 118.40228, showFlag: false },
        { lat: 34.415279, lng: 118.410904, showFlag: false },
        { lat: 34.411705, lng: 118.416438, showFlag: false },
        { lat: 34.40551, lng: 118.424558, showFlag: false },
        { lat: 34.294223, lng: 118.626282, showFlag: false },
        { lat: 34.294221, lng: 118.6271, showFlag: false },
        { lat: 34.294219, lng: 118.628, showFlag: false },
        { lat: 34.294217, lng: 118.629, showFlag: false },
        { lat: 33.93653, lng: 118.944965, showFlag: false },
        { lat: 33.93652, lng: 118.945965, showFlag: false },
        { lat: 33.93651, lng: 118.946963, showFlag: false },
        { lat: 33.800187, lng: 119.053395, showFlag: false },
        { lat: 33.703233, lng: 119.133559, showFlag: false }
      ]
    };
  },
  mounted() {
    // this.enableScrollWheelZoom()
  },
  methods: {
    infoWindowClose(item) {
      item.showFlag = false;
    },
    infoWindowOpen(flag) {},
    isShow(flag) {
      this.positionData.forEach((item, index) => {
        if (flag.lat != item.lat) {
          item.showFlag = false;
        } else {
          item.showFlag = true;
        }
      });
    },
    update(e) {
      this.points = e.target.cornerPoints;
    },
    toDetail(data) {
      this.$router.push({
        path: "/projectDetails",
        query:{data:data}
      });
      sessionStorage.setItem("imgdata", JSON.stringify(data));
    }
  }
};
</script>
<style scoped>
.bm-view,
.map {
  width: 1200px;
  height: 600px;
}
.left {
  width: 120px;
  height: 88px;
  margin-right: 12px;
}
.right {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  /* line-height: 24px; */
}
.newAdd,
.newAdd2,
.newAdd3 {
  background: #51b342;
  border-radius: 2px;
  font-size: 12px;
  line-height: 18px;
  width: 45px;
  height: 18px;
  text-align: center;
  color: #fff;
}
p{margin-bottom: 0px;}
.newAdd2 {
  background: #ff8a00;
}
.newAdd3 {
  background: #074dec;
}
.addNum {
  font-size: 14px;
  color: #999999;
  /* line-height: 48px; */
}
/* .BMap_vectex_nodeT{
  background-image: none;
}
.BMap_vectex_node{
  background-image: none;
} */
::v-deep path {
  stroke: red;
}
::v-deep .anchorBL {
  display: none;
}
</style>
